<template>
  <div>
    <el-dialog
      title="向客服申诉"
      v-model="editVisible"
      width="50%"
      top="5vh"
      :close-on-click-modal="false"
      @close="handleclose"
    >
      <el-form>
        <el-form-item
          label="恶意申诉属于扰乱平台正常运营，情节严重将冻结账户"
          :required="true"
        ></el-form-item>
        <el-form-item label="申诉原因" :required="true">
          <el-select
            v-model="Refused.reason"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in AppealReasonList"
              :key="item.paramName"
              :label="item.paramName"
              :value="item.paramName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申诉原因">
          <el-input v-model="Refused.remark" type="textarea"></el-input>
        </el-form-item>
        <el-form-item :required="true">
          <div class="displayflex marginleft70">
            <!-- <span class="width160">*上传支付凭证（截图）：</span> -->
            <el-upload
              :action="uploaddata.url+''"
              :data="uploaddata.data"
              :on-preview="handlePictureCardPreview"
              :headers="uploaddata.headers"
              name="file"
              accept=".png,.jpg,.gif"
              list-type="picture-card"
              @click="handleUpload"
              :on-remove="handleRemove"
              :on-success="Uploadsuccess"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="btn_b displayflex justify-content margintop30">
            <el-button @click="handleclose" class="icon-search1"
              >取消申诉</el-button
            >
            <el-button
              type="primary"
              class="icon-search"
              @click="handleSaveEdit"
              >提交申诉</el-button
            >
          </div>
        </el-form-item>
      </el-form>
      <template #footer> </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getDictionariesList } from "../assets/js/common";
import api from "../api/api";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    // 参考图片
    const editVisible = ref(context.attrs.editVisible);
    const radioValue = ref(context.attrs.radioValue);
    const orderId = context.attrs.orderId;
    const AppealReasonList = ref([]);
    getDictionariesList("AppealReason").then((res) => {
      AppealReasonList.value = res;
    });
    const Refused = reactive({
      orderId: orderId,
      reason: null,
      remark: null,
      imageUrls: [],
    });
    const router = useRouter();
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    //图片上传
    const uploaddata = ref({});
    const handleUpload = () => {
      uploaddata.value = {
        url: api.getUrl() + "external/file/upload", //接口名称
        data: {
          upType: "fc",
          sort: Math.floor(Math.random() * 20) + 1,
        },
        headers: {
          token: localStorage.getItem("token"),
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      };
    };
    const Uploadsuccess = (response, file, fileList) => {
      console.log(response);
      // var num = Math.floor(Math.random() * 20) + 1;
      if (response.data) {
        Refused.imageUrls.push(response.data.url);
      }
    };
    const handleSaveEdit = () => {
      if (!Refused.reason) {
        ElMessage.error("请选择申诉原因");
        return;
      }
      api
        .postFormAPI("trade/client/order/appeal/addAppeal", Refused)
        .then((res) => {
          if (res.data.code == 1) {
            ElMessage.success("提交成功！");
            editVisible.value = false;
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .catch((err) => console.log(err));
    };
    return {
      router,
      radioValue,
      editVisible,
      uploaddata,
      Refused,
      AppealReasonList,
      handleclose,
      handleSaveEdit,
      handleUpload,
      Uploadsuccess,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";@import "../assets/css/common.less";
.btn_b {
  margin-top: 30px;
}
</style>
